<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">网站管理</a></li>
        <li class="active">新增轮播图</li>
    </ol>
</section>
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}">
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}">
<script type="text/css" th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/assets/layui.all.js}"></script>

<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <div class="box-body">
            <form id="bannerForm" class="form-horizontal">
                <input id="status" type="hidden" name="status">
                <input id="articleContent" type="hidden" name="content">
                <input id="articleContentMd" type="hidden" name="contentMd">
                <div class="col-lg-8 pl0">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="col-lg-2 col-sm-3 control-label">title：</label>
                            <input type="text" class="form-control" id="title" name="title" placeholder="请输入轮播图title" require="">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="col-lg-2 col-sm-3 control-label">排序</label>
                            <input type="text" class="form-control" id="sort" name="sort" placeholder="轮播图排序" require="">
                        </div>
                    </div>
                    <!--<div class="form-group">
                        <div class="col-xs-12">
                            <input type="text" class="form-control" id="enable" name="enable" placeholder="禁用状态" require="">
                        </div>
                    </div>-->
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否禁用:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal"  type="radio"  name="enable"  value="1">是
                                </label>
                                <label>
                                    <input class="minimal"  type="radio"  name="enable" checked  value="0">否
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 article-extra">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <a class="article-btn table-btn table-btn-info" onclick="saveBanner()">保存</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">图片预览:</label>
                            <div class="input-group ml80" style="position: relative">
                                <input type="hidden" class="form-control" name="imageId" id="imageId" >
                                <div id="queue">
                                    <img alt="封面" th:src="@{/img/noPic.png}"  width="240px" height="240px">
                                </div><br>
                                <button type="button" class="layui-btn" id="banner-pic">
                                    <i class="layui-icon">&#xe67c;</i>上传轮播图
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="upload-content" class="upload-content form-group"></div>
                </div>
            </form>
        </div>
    </div>
</section>
</html>
<script type="text/javascript">
    var contextPath = [[${#request.getContextPath()}]]
    layui.use('upload',function(){
        var upload = layui.upload;
        // 执行实例
        var uploadInst = upload.render({
            elem : '#banner-pic',
            url: '/upload',
            done:function (res) { //上传完毕回调
                var id = res.id;
                //将图片路径复制到图片路径属性中
                console.log(res.id);
                showHeadImg(id)
            },
            error:function (res) {
                //请求异常回调
                layer.msg(res.data);
            }
        });
    });
    function showHeadImg(id) {
        if (id) {
            //寻找#imgId下的src标签，设置属性为xxx
            // document.getElementById("coverImage").value = id;
            $("#imageId").val(id);
            $('#queue').find('img').attr('src', "/images/" + id + "?w=200&h=200");
        }
    }

</script>
<script>
    function saveBanner(status) {
        // if(validArticle()){
            Core.confirm("确认保存吗？",function () {
                var serialize = $("#bannerForm").serialize();
                debugger
                Core.postAjax("/banner/add",$("#bannerForm").serialize(),function (data) {
                    if(data.status === 200){
                        // myEditor.setData('');
                        Core.load("#content","/banners");
                    }
                    layer.msg(data.msg)
                })
            })
        // }
    }
    function changeSlider(val) {
        console.log(val);
    }
</script>